<template>
    <div class="app-wrap">
        <div class="login_content">
            <div class="login_head">
                <div>
                    <nuxt-link to="/">
                        <img class="logo" src="@/assets/images/logo.png" />
                    </nuxt-link>
                </div>
                <div class="return_shop">
                    <nuxt-link to="/">返回商城</nuxt-link>
                </div>
            </div>
            <div class="login_input_flex">
                <div class="login_input_view">
                    <div class="login_type">找回密码</div>
                    <el-form ref="form" :model="form" :rules="rules" :show-message="false" class="login_input_value">
                        <el-form-item prop="mobile" >
                            <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                        <el-form-item class="code-box" prop="captcha">
                            <el-input v-model="form.captcha" placeholder="请输入验证码"></el-input>
                            <!-- <div class="send_code">获取验证码</div> -->
                            <div class="send_code" @click="SendSms" v-if="isCountdownOver">获取验证码</div>
                            <div class="send_code" v-else>{{ countdown + "秒后重新发送" }}</div>
                        </el-form-item>
                        <el-form-item prop="newpassword" >
                            <el-input type="password" show-password v-model="form.newpassword" placeholder="请输入新密码"></el-input>
                        </el-form-item>
                        <el-form-item prop="respassword" >
                            <el-input type="password" show-password v-model="form.respassword" placeholder="请再次输入新密码"></el-input>
                        </el-form-item>
                        <el-form-item> 
                            <el-button class="login_button" round @click="findPasswordHandler">重置密码</el-button>
                        </el-form-item>
                    </el-form>
                    <div class="register_account">
                        <nuxt-link to="/memberCenter/login">返回登录</nuxt-link>
                        <!-- <a href="">返回登录</a> -->
                    </div>
                </div>
                <div class="copyright">Copyright © 2002-2023 北京鑫康辰医学科技发展有限公司. All Rights Reserved. 京ICP备12345678.</div>
            </div>
        </div>
    </div>
</template>

<script>
import { validatePhone } from "@/utils/common";
import common from "@/api/common";
import api from "@/api/user"
export default {
    layout: "register",
    data() {
        var validateTel = (rule, value, callback) => {
            if (validatePhone(value)) {
                callback()
            } else {
                callback(new Error("手机号格式不正确"));
            }
        };
        return {
            form: {
                mobile: "", // 手机号
                captcha: "",
                newpassword: "",
                respassword: ""
            },
            initialCountdown: 60, // 初始倒计时秒数
            countdown: 60, // 当前倒计时秒数
            isCountdownOver: true, // 是否倒计时已结束
            rules: {
                mobile: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { validator: validateTel, trigger: 'blur' }
                ],
                newpassword: [
                    { required: true, message: '请输入账号密码', trigger: 'blur' },
                    { min: 8, max: 20, message: '密码长度在 8 到 20 个字符', trigger: 'blur' }
                ],
                respassword: [
                    { required: true, message: '请输入账号密码', trigger: 'blur' },
                    { min: 8, max: 20, message: '密码长度在 8 到 20 个字符', trigger: 'blur' }
                ],
                captcha: [
                    { required: true, message: '请输入手机验证码', trigger: 'blur' },
                ]
            },
        };
    },
    methods: {
        // 开始计时
        startCountdown() {
        // 使用定时器每秒更新倒计时值
            const countdownTimer = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--;
                } else {
                    clearInterval(countdownTimer); // 清除定时器
                    this.isCountdownOver = true; // 设置倒计时结束标志
                    this.countdown = this.initialCountdown;
                }
            }, 1000);
        },
        // 点击发送手机验证码
        SendSms: function () {
            if (validatePhone(this.form.mobile)) {
                var input = {
                    event: "resetpwd",
                    mobile: this.form.mobile
                }
                common.SendSms(input)
                    .then(res => {
                        this.$message.success("发送成功");
                        this.isCountdownOver = false;
                        this.startCountdown();
                    }).catch((err) => {
                        
                    })
            } else {
                this.$message.warning("请输入正确的手机号");
            }
        },
        // 找回密码
        findPasswordHandler:function(){
            let _this = this;
            _this.$refs.form.validate((valid) => {
                if (valid)
                {
                    api.ResetPassword(_this.form)
                        .then(res => {
                            // 注册成功后需要调用登录
                            // 成功之后弹窗
                            _this.form.partner_id = "";
                            _this.$message.success("密码重置成功");
                            _this.$refs.form.resetFields();
                        }).catch((err) => {
                        
                        });
                }
                else
                {
                    const errors = _this.$refs.form.fields.filter(field => field.validateState === "error").map(x => x.validateMessage);
                    _this.$message.warning(errors[0]);
                }
            });
        },
    }
};
</script>
<style>
    @import url(@/assets/css/login.css);
</style>